<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <link rel="shortcut icon" type="image/x-icon" th:href= "@{/static/img/timg.jpg}">
    <link rel="stylesheet" th:href="@{/static/css/TandC.css}">
    <link rel="stylesheet" th:href="@{/static/css/common.css}">
    <link rel="stylesheet" th:href="@{/static/css/goods.css}">
</head>
<body>
<!--顶部+搜索+侧边-->
<div th:include="like/likeHead :: common"></div>
<!--商品展示-->
<div class="g-string"></div>
<div class="g-introduce">
    <div class="g-introduce-content">
        <!--商品展示-放大镜-->
        <div class="g-content-left">
            <div class="g-glass-pic">
                <li th:each="photo:${photoName}" style="list-style-type: none">
                    <img class="g-glass-current" th:src="@{'./../static/img/'+${photo}}" alt="">
                </li>
                <div class="g-glass-cover">

                </div>
            </div>
            <ul class="g-glass-list" th:if="${photoName!=null}">
                <li th:each="photo:${photoName}">
                    <img class="g-glass-current" th:src="@{'./../static/img/'+${photo}}" alt="">
                </li>
            </ul>
            <div class="g-glass-detail"></div>

            <div class="g-glass-function">
                <a class="g-collection" th:href="@{'/jumpShop?storeId='+${goods.getStoreId()}}">
<!--                    <img th:src="@{/static/img/star.png}" alt="">&nbsp;收藏商品(******人气)-->
                    进入官方旗舰店
                </a>
            </div>
        </div>
        <!--商品展示-价格-->
        <div class="g-content-center">
            <div class="g-center-center">
                <div class="g-content-head">
                    <h4 th:text="${goods.getGoodsName()}"></h4>
<!--                    <span class="g-content-word">品质升级 只为点滴幸福</span>-->
                </div>
                <div class="g-content-price">
                    <div class="g-price">
                        <div class="g-price-right">单价：￥
                            <p class="payPerices" id="g-price" th:text="${goods.getGoodsPrice()}"></p>
                        </div>
                    </div>
                </div>


                <div class="g-content-number">
                    <div class="g-number">
                        <div class="g-number-left"><span>数量</span></div>
                        <div class="g-content-button">
                            <input type="text" id="g-number"  name="buyNumber" class="g-button-left" value="1">
                            <img class="g-button g-button-top" id="g-number-add" th:src="@{/static/img/arrow-top.png}">
                            <img class="g-button g-button-bottom" id="g-number-delete" th:src="@{/static/img/arrow-bottom.png}">
                            <span class="g-button-word">件</span>
<<<<<<< HEAD
                            <span class="g-button-word">库存*****件</span>
=======
<!--                            <span class="g-button-word">库存*****件</span>-->
>>>>>>> 08eb8af4f0dd32cffd193aebfdef9551d4abfa2f
                            <span class="g-button-word">总价:￥</span>
                            <span id="details" th:text="${goods.getGoodsPrice()}"></span>
                        </div>
                    </div>
                </div>
                <div class="g-content-buy">
                    <div class="g-buy">
                        <button class="g-buy-content g-buy-left" id="buy"><a>立即购买</a></button>
                        <button class="g-buy-content g-buy-right" id="addCar"><img th:src="@{/static/img/purchase.png}">&nbsp;加入购物车</button>
                    </div>
                </div>
                <div class="g-goods-more">
                    <div class="g-goods-string"></div>
                    <div class="g-goods-word">看了此商品的会员通常还看了</div>
                    <div class="g-goods-string"></div>
                </div>
                <div class="g-goods">
                    <div class="g-goods-one" th:each="likeDateAll:${likeDate2}">
                        <div class="g-one-picture">
                            <a>
                                <img th:src="@{'/static/img/'+${likeDateAll.getPhotoName()}}">
                            </a>
                        </div>
                        <div class="g-goods-introduce">
                            <a th:text="${likeDateAll.getName()}"></a>
                        </div>
                        <span th:text="${'￥'+likeDateAll.getPrice()}"></span>
                        <div class="g-goods-star">
                            <img th:src="@{/static/img/实心星星.png}">
                            <img th:src="@{/static/img/实心星星.png}">
                            <img th:src="@{/static/img/实心星星.png}">
                            <img th:src="@{/static/img/实心星星.png}">
                            <img th:src="@{/static/img/实心星星.png}">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--页面下部分-->
<div class="g-button-content">
    <div class="g-button-picture">
       <div class="g-picture-one"><a th:each="date:${likeDate1}" th:href="@{'/goods/selectOneGood?goodId='+${date.getId()}}"><img th:src="@{'/static/img/'+${date.photoName}}"></a>
       </div>
    </div>
    <div class="g-button-detail">
        <ul class="g-detail-ul" id="tab1">
            <li class="g-active">商品详情</li>
<!--            添加评价-->
            <li style="padding: 5px 15px;">
                <div class="button">
                    <button id="addComment">查看评价</button>
                </div>
            </li>


        </ul>
        <ul class="g-detail-content" id="tab2">
            <!--商品详情-->
            <li class="g-content-li g-content1">
                <div class="g-slider" id="g-slider" th:if="${photoName!=null}">
                    <img class="g-show" th:each="photo:${photoName}" th:src="@{'/static/img/'+${photo}}" alt="">
                </div>
            </li>

            <!--累计评价-->
            <li class="g-content-li g-content2">
                <div class="g-content2-string"></div>
                <!--用户评价-->
                <div class="g-evaluate-user">
                    <div class="g-user">
                        <div class="g-user-left">
                            是正品，一直喜欢在天猫超市购物。奶味道不错，正品质量很好！
                            日期也好牛奶日期很新鲜， 口感给超市一样，是正品的，下次活动要再买几箱。
                            非常好，味道纯正价格实惠牛仔味道纯正，口感不错牛奶口感很不错，
                            和店里一样，配送速度很快，满意。牛奶超级好喝，狠狠算，很划算，
                            反正外面买也要这个价格为什么不在天猫买，很喜欢很给力自对白下次还要买
                            很多0428.WS
                        </div>
                        <div class="g-user-right">w***p（匿名）</div>
                    </div>
                    <div class="g-user-date">05.15</div>
                    <div class="g-user-string"></div>
                </div>
<!--                需要添加评价框-->

<!--                <div class="comment">-->
<!--                    <textarea rows="8" cols="123" id="area"> </textarea>-->
<!--                </div>-->
            </li>

            <!--售后服务-->
        </ul>
    </div>
    <div class="g-button-right">
        <div class="g-right-word">
            <div class="g-right-string"></div>
            <div class="g-right-word-word">本店同类好评商品</div>
            <div class="g-right-string"></div>
        </div>
        <div class="g-right-picture">
            <a th:each="data2:${likeDate2}"  th:href="@{'/goods/selectOneGood?goodId='+${data2.getId()}}"><img th:src="@{'/static/img/'+${data2.photoName}}"></a>
        </div>
    </div>
</div>
<script th:src="@{/static/js/jquery-3.3.1.min.js}"></script>
<script th:src="@{/static/js/goods.js}"></script>
<script th:src="@{/static/js/index.js}"></script>
</body>
</html>